<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">
  <xi:include href="master.html" />

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
    <title>Add a gig - TG Gigs</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAafMOAhcmor_u0yfc2lnhJBSlpP409zJXm6PiD0iaWmm3frSqqhTZTBNa49RbrpPt4agzhrsTrjhqAw" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    window.addEvent('domready', function() {
        if (GBrowserIsCompatible()) {
            var geocoder = new GClientGeocoder();
            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(37.4419, -122.1419), 13);
            map.addControl(new GSmallMapControl());
            $('map_update').addEvent('click', function(e) {
                e.stop();
                var location_str = $('location').value + ", " + $('country').value;
                geocoder.getLatLng(location_str, function(point) {
                    if (!point) {
                        // TODO: change this to a modal dialogue or something
                        alert("We could not find the location specified");
                    } else {
                        map.clearOverlays();
                        map.checkResize();
                        map.setCenter(point, 12);
                        var marker = new GMarker(point, {draggable: true});
                        map.addOverlay(marker);
                        $('geo_x').value = point.x;
                        $('geo_y').value = point.y;
                        
                        GEvent.addListener(marker, "dragend", function() {
                            $('geo_x').value = marker.getPoint().x;
                            $('geo_y').value = marker.getPoint().y;
                        });
                    }
                });
            });
        }
    });
    //]]>
    </script>
    
</head>

<body class="tundra">
<h2>Add a gig</h2>
<form action="/add_gig" method="POST">
    <input type="hidden" name="geo_x" id="geo_x" />
    <input type="hidden" name="geo_y" id="geo_y" />
    <fieldset>
        <legend>Step 1 - Gig info</legend>
        <dl class="form_container">
            <dt>
                <label for="job_title">Job title</label>
                <img src="/images/question_mark.png" id="job_title_help" alt="?"/><span dojoType="dijit.Tooltip" connectId="job_title_help" style="display:none">Enter the title of the job or project here</span>
            </dt>
            <dd>
                <input type="text" dojoType="dijit.form.TextBox" id="job_title" name="job_title" />
            </dd>
            
            <dt>
                <label for="description">Description</label>
                <img src="/images/question_mark.png" id="description_help" alt="?"/><span dojoType="dijit.Tooltip" connectId="description_help" style="display:none">Enter the details about the job or project here</span>
            </dt>
            <dd>
                <textarea dojoType="dijit.form.SimpleTextarea"></textarea>
            </dd>
            
            <dt>
                <label for="country">Country</label>
            </dt>
            <dd>
                <select id="country" name="country" dojoType="dijit.form.FilteringSelect" autocomplete="true">
                    <option value="NULL"></option>
                    <option py:for="c in countries" value="${c.alpha2}">${c.name}</option>
                </select>
            </dd>
            
            <dt><label for="location">Location</label></dt>
            <dd>
                <input type="text" dojoType="dijit.form.TextBox" id="location" name="location" />
                <img src="/images/question_mark.png" id="location_help" alt="?"/>
                <span dojoType="dijit.Tooltip" connectId="location_help" style="display:none">Enter your location. This will update the map below to allow for better geographical searches by potential applicants.</span>
                <div><button dojoType="dijit.form.Button" id="map_update">Update map</button></div>
                <div id="map_canvas" style="height:300px;width:500px;"></div>
            </dd>
        </dl>
    </fieldset>
</form>
</body>
</html>